<!DOCTYPE html>
<html lang="en" xmlns:right>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .demo-image:hover {
            position: relative;
            top: 5px;
            /*设置元素阴影:x,y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 10px 6px #333;
        }

        .p_img:hover {
            position: relative;
            top: 5px;
            /*设置元素阴影:x,y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 10px 5px #333;
        }

    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style=" width: 100%;padding: 0; height: 150px;">
            <!--导航菜单开始-->
            <div style="background-color: black;">
                <el-menu style="width: 1200px;margin: 0 auto;height: 100px;"
                         :default-active="activeIndex"
                         class="el-menu-demo"
                         mode="horizontal"
                         @select="handleSelect"
                         background-color="black"
                         text-color="#fff"
                         active-text-color="#fff">
                    <a href=""><img src="imgs/logo.png" style="width: 40px;height: 40px;
                    float: left; margin-top:25px;margin-left: 320px;
                    vertical-align: middle" alt="YxMall商城官网"></a>

                    <div style="float: right;position: relative;top: 30px;right: 500px">
                        <el-input v-model="wd" placeholder="请输入商品信息">
                            <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
                        </el-input>
                    </div>

                    <a href="/allResult.html" style="text-decoration: none;color:white;float: right;position: relative;
                        margin-top:35px;right: 150px;line-height: 30px">全部商品</a>

                    <div style="float: right;position: relative;top:25px">

                        <a href=""><img src="imgs/1.jpg" alt=""></a>
                        <a href="/cart.html"><img src="imgs/2.jpg" alt=""></a>
                    </div>
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
                </el-menu>

            </div>
            <!--导航菜单结束-->
            <div class="d_img"
                 style="float:left;z-index:10;background-color: rgb(247,247,247);height:70px;width: 100%;margin: 0 auto;position: fixed;">
                <el-breadcrumb separator="|" style="margin-top: 30px;margin-left: 300px">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>


        </el-header>
        <el-main style="width:1510px;margin: 10px auto">
            <el-row gutter="20">
                <el-col span="18">
                    <!--轮播图开始-->
                    <el-carousel style="width:1490px" height="500px">
                        <el-carousel-item v-for="i in bannerArr">
                            <img :src="i.url" width="100%" height="100%" alt="">
                        </el-carousel-item>

                    </el-carousel>
                </el-col>
            </el-row>
        </el-main>

        <div style="float: left;margin:0 auto ">
            <a href=""><img src="imgs/3.jpg" class="demo-image" style="width: 300px;height: 250px;" alt=""></a>
            <a href=""><img src="imgs/4.jpg" class="demo-image" style="width: 300px;height: 250px;" alt=""></a>
            <a href=""><img src="imgs/5.jpg" class="demo-image" style="width: 300px;height: 250px;" alt=""></a>
        </div>

        <div style="padding:0px 200px;background-color: rgb(249,249,248);position: relative;border: 1px rgb(249,249,248) solid;width:800px;margin: 0 auto">
            <span style="font-weight: bold;font-size: 25px">热门商品</span></div>
        <div style="padding:0px 200px;background-color: rgb(247,247,247);position: relative">
            <el-row gutter="20">
                <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
                    <el-card>
                        <a :href="'/detail.html?id='+p.id">
                            <img class="p_img" :src="p.url" width="100%" alt="">
                        </a>
                        <div>
                            <a style="text-decoration: none;color: #3f3f3f" :href="'/detail.html?id='+p.id">
                                <p style="font-size: 15px;height: 40px;margin-top: 0">
                                    {{p.title}}</p>
                            </a>

                            <p style="font-size: 12px;color: #666">
                                ￥{{p.price}} 浏览量:{{p.viewCount}}
                                <span style="float: right">销量:{{p.saleCount}}件</span>
                            </p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <el-footer>
            <div style="height: 95px;background-image: url('imgs/wave.png')">
            </div>
            <div style="background-color: #3f3f3f;padding:30px 0;text-align: center;color: #b1b1b1">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号
                </p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
            </div>
        </el-footer>
    </el-container>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: function () {
            return {
                activeIndex: '',
                wd: '',
                currentIndex: "1-1",
                categoryArr: [],
                bannerArr: [{url: "imgs/1.jpg"}, {url: "imgs/2.jpg"}],
                productArr: [{
                    id: "1",
                    url: "imgs/4.jpg",
                    title: "1",
                    price: "1",
                    viewCount: "1",
                    saleCount: "1"
                }, {id: "1", url: "imgs/4.jpg", title: "1", price: "1", viewCount: "1", saleCount: "1"}, {
                    id: "1",
                    url: "imgs/4.jpg",
                    title: "1",
                    price: "1",
                    viewCount: "1",
                    saleCount: "1"
                }, {id: "1", url: "imgs/4.jpg", title: "1", price: "1", viewCount: "1", saleCount: "1"}, {
                    id: "1",
                    url: "imgs/4.jpg",
                    title: "1",
                    price: "1",
                    viewCount: "1",
                    saleCount: "1"
                }, {id: "1", url: "imgs/4.jpg", title: "1", price: "1", viewCount: "1", saleCount: "1"}],
                user: {},

            }
        },
        methods: {
            handleSelect(key, keyPath) {
                if (key == '1-2') {
                    let name = prompt("请输入分类的名称");
                    if (name == null) {
                        return;
                    }
                    if (name == '') {
                        v.$message.error("分类名称不能为空");
                        return;
                    }

                }
            }
        },
        created:function () {
            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            });
        }
    })


</script>
</body>
</html>